<template>
	<view>
		<view class="page">
			<comp-common v-bind="{data:data}" @getUserInfo="getUserInfo" @myLogin="myLogin" @getPhoneNumber="getPhoneNumber" @hideGetCoupon="hideGetCoupon" @closeCouponBox="closeCouponBox" @navigatorClick="navigatorClick"></comp-common>
			<comp-header v-bind="{data:data}" @relevanceError="relevanceError" @relevanceSuccess="relevanceSuccess"></comp-header>
			<view class="body after-navber">
				<scroll-view class="scroll-view-x" :scrollIntoView="data.toView" :scrollLeft="data.scrollLeft" scrollWithAnimation="true" scrollX="true" style="width:100%;" v-if="data.cat_show=='1'&&data.cid_url">
            <view @tap="switchNav" :class="['scroll-view-item', data.cid==0?'active':'']" data-id="0" id="0">
                全部
            </view>
            <view @tap="switchNav" :class="['scroll-view-item', data.cid==item.id?'active':'']" :data-id="item.id" :id="item.id" v-for="(item,index) in data.cat" :key="unique">
                    {{item.name}}
                </view>
        </scroll-view>
        <scroll-view scrollY class="after-navber" :scrollIntoView="data.toView" :scrollTop="data.scrollTop" :style="data.cat_show=='1'&&data.cid_url?'padding-top: 100upx;':''" style="height: 100%">
            <view class="goods">
                <navigator class="goods-item" :url="'/pages/book/details/details?id='+item.id" v-for="(item,index) in data.goods" :key="item.id">
                    <view class="goods-pic">
                        <image :src="item.cover_pic"></image>
                    </view>
                    <view class="goods-title">
                        {{item.name}}
                    </view>
                    <view class="price flex-row flex-y-center">
                        <view class="money flex-grow-1 flex-y-center" v-if="item.price!=0">
                            ¥ <view style="max-width:180upx">{{item.price}}</view>
                        </view>
                        <view class="money flex-grow-1 flex-y-center" v-if="item.price==0">
                            免费预约
                        </view>
                        <view class="go-book flex-gorw-0 flex-x-center flex-y-center">
                            预约
                        </view>
                    </view>
                </navigator>
            </view>
            <view :class="['loading-bar', data.show_loading_bar?'active':'']" style="text-align: center;" :style="data.emptyGoods==1?'display:none':''">
                <image :src="data.__wxapp_img.system.loading.url" style="width: 160upx;height: 80upx"></image>
            </view>
            <view class="empty-bar flex-row flex-x-center flex-y-center" :style="data.emptyGoods!=1?'display:none':''">
                没有更多商品了~
            </view>
        </scroll-view>
			</view>
			<comp-quick-navigation v-bind="{data:data}" @cutover="cutover" @map_power="map_power" @to_dial="to_dial" @openWxapp="openWxapp"></comp-quick-navigation>
			<comp-footer v-bind="{data:data}"></comp-footer>
		</view>
	</view>
</template>

<script>var myVue = {};
	export default {
		data() {
			return {
				data: {
        cid: 0,
        scrollLeft: 600,
        scrollTop: 0,
        emptyGoods: 0,
        page: 1,
        pageCount: 0,
        cat_show: 1,
        cid_url: !1
    },
			};
		},
		onLoad: function(t) {myVue = this;
        if (myVue.getApp.page.onLoad(this, t), this.systemInfo = myVue.getApp.core.getSystemInfoSync(), 
        t.cid) {
            t.cid;
            return this.setData({
                cid_url: !1
            }), void this.switchNav({
                currentTarget: {
                    dataset: {
                        id: t.cid
                    }
                }
            });
        }
        this.setData({
            cid_url: !0
        }), this.loadIndexInfo(this);
    },
    onReady: function(t) {
        myVue.getApp.page.onReady(this);
    },
    onShow: function(t) {
        myVue.getApp.page.onShow(this);
    },
    onHide: function(t) {
        myVue.getApp.page.onHide(this);
    },
    onUnload: function(t) {
        myVue.getApp.page.onUnload(this);
    },
    onPullDownRefresh: function(t) {
        myVue.getApp.page.onPullDownRefresh(this);
    },
		onReachBottom: function(t) {
        var a = this, e = a.data.page, o = a.data.pageCount, s = a.data.cid;
        a.setData({
            show_loading_bar: 1
        }), ++e > o ? a.setData({
            emptyGoods: 1,
            show_loading_bar: 0
        }) : myVue.getApp.request({
            url: myVue.getApp.api.book.list,
            method: "get",
            data: {
                page: e,
                cid: s
            },
            success: function(t) {
                if (0 == t.code) {
                    var e = a.data.goods;
                    Array.prototype.push.apply(e, t.data.list), a.setData({
                        show_loading_bar: 0,
                        goods: e,
                        page: t.data.page,
                        pageCount: t.data.page_count,
                        emptyGoods: 0
                    });
                }
            }
        });
    },
    onShareAppMessage: function() {
        return myVue.getApp.page.onShareAppMessage(this), {
            path: "/pages/book/index/index?user_id=" + this.data.__user_info.id + "&cid=",
            success: function(t) {}
        };
    },
		methods: {
			loadIndexInfo: function() {
        var t = this;
        myVue.getApp.core.showLoading({
            title: "正在加载",
            mask: !0
        }), myVue.getApp.request({
            url: myVue.getApp.api.book.index,
            method: "get",
            success: function(a) {
                0 == a.code && (t.getApp.core.hideLoading(), t.setData({
                    cat: a.data.cat,
                    goods: a.data.goods.list,
                    cat_show: a.data.cat_show,
                    page: a.data.goods.page,
                    pageCount: a.data.goods.page_count
                }), !a.data.goods.list.length > 0 && t.setData({
                    emptyGoods: 1
                }));
            }
        });
    },
    switchNav: function(t) {
        var a = this;
        myVue.getApp.core.showLoading({
            title: "正在加载",
            mask: !0
        });
        var e = 0;
        if (e != t.currentTarget.dataset.id || 0 == t.currentTarget.dataset.id) {
            if (e = t.currentTarget.dataset.id, "wx" == this.data.__platform) {
                var o = a.systemInfo.windowWidth, s = t.currentTarget.offsetLeft, d = a.data.scrollLeft;
                d = s > o / 2 ? s : 0, a.setData({
                    scrollLeft: d
                });
            }
            if ("my" == this.data.__platform) {
                for (var i = a.data.cat, n = !0, p = 0; p < i.length; ++p) if (i[p].id === t.currentTarget.id) {
                    n = !1, p >= 1 ? a.setData({
                        toView: i[p - 1].id
                    }) : a.setData({
                        toView: "0"
                    });
                    break;
                }
                n && a.setData({
                    toView: "0"
                });
            }
            a.setData({
                cid: e,
                page: 1,
                scrollTop: 0,
                emptyGoods: 0,
                goods: [],
                show_loading_bar: 1
            }), myVue.getApp.request({
                url: myVue.getApp.api.book.list,
                method: "get",
                data: {
                    cid: e
                },
                success: function(t) {
                    if (0 == t.code) {
                        a.getApp.core.hideLoading();
                        var e = t.data.list;
                        t.data.page_count >= t.data.page ? a.setData({
                            goods: e,
                            page: t.data.page,
                            pageCount: t.data.page_count,
                            show_loading_bar: 0
                        }) : a.setData({
                            emptyGoods: 1
                        });
                    }
                }
            });
        }
    },
		},
	}
</script>

<style scoped>

.scroll-view-x {
    white-space: nowrap;
    position: fixed;
    top: var(--window-top);
    z-index: 9999;
    height: 92upx;
    background-color: #ffecec;
}

.scroll-view-x .scroll-view-item {
    display: inline-block;
    margin: 16upx 0upx 16upx 36upx;
    padding: 0 24upx;
    font-size: 12pt;
    color: #666666;
    height: 60upx;
    line-height: 60upx;
    white-space: nowrap;
}

.scroll-view-y {
    border-top: 1px solid #cccccc;
    border-bottom: 1px solid #cccccc;
}

swiper {
    height: 304upx;
}

.scroll-view-x .active {
    color: #fff;
    border-radius: 30upx;
    background-color: #ffa360;
    background: -webkit-gradient(linear,left top,right bottom,color-stop(0%,#ffa360),color-stop(140%,#ff5c5c));
    background-image: linear-gradient(140deg,#ffa360,#ff5c5c);
    height: 60upx;
}

.loading-bar {
    visibility: hidden;
}

.loading-bar.active,empty-bar {
    visibility: visible;
}

.empty-bar {
    height: 80upx;
    color: #919191;
}

.goods {
    padding-bottom: 16upx;
}

.goods-pic image {
    width: 100%;
    height: 352upx;
}

.goods-item {
    display: inline-block;
    margin: 16upx 11.5upx;
    font-size: 11pt;
    background-color: #ffffff;
}

.goods-title {
    color: #353535;
    width: 352upx;
    padding: 20upx;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    height: 90upx;
    line-height: 1.2;
    font-size: 32upx;
}

.price {
    padding: 20upx;
    color: #ff4545;
}

.money {
    font-size: 13pt;
}

.go-book {
    width: 112upx;
    border-radius: 24upx;
    border: 1upx solid #ff4544;
    background-color: #fff5f5;
    padding: 2upx 0;
}
</style>
